<!-- eslint-disable vue/multi-word-component-names -->
<template>
  <div class="technology-main">
    <div class="technology" v-html="technology"></div>>

  </div>
</template>

<script setup lang="ts">
import '../../assets/markdown.css';
import { useRoute } from 'vue-router';
const route = useRoute()
import { onMounted, ref } from 'vue';
import markdown from '@/utils/markdown'
//es2020语法用字符串模板动态导入
async function loadModule(type: string, moduleName: string) {
  const module = await import(`../../mackdown/${type}/${moduleName}.md?raw`);
  return module;
}
const technology = ref<string>('')
onMounted(async () => {
  //markdown转html
  const stringg = await loadModule(route.query.type as string, route.query.name as string)
  technology.value = markdown(stringg.default)
})





</script>

<style scoped lang="scss">
.technology-main {
  width: 100%;
  height: 100vh;
  position: relative;
  display: flex;
  justify-content: start;
  align-items: end;


  .technology {
    scroll-behavior: smooth;
    box-shadow: 0 0 6px 6px rgba(0, 0, 0, 0.5);
    height: 87vh;
    max-width: 900px;
    min-width: 360px;
    width: 50%;
    overflow: auto;
    border-radius: 20px;
    margin-left: 200px;
    padding: 0 10px;

    &::-webkit-scrollbar {

      display: none;
    }


    color: aliceblue;
  }

  background: rgba(0, 0, 0, 0.723);
}
</style>